<!-- 红包奖励弹窗 -->
<!--XXX 已弃用，考虑删除 -->
<template>
  <with-mask :is-show="redPacketRankCurrentModalType === 'reward'">
    <div class="container">
      <!-- 奖品一览 -->
      <div class="prize-list">
        <!-- 背景 -->
        <div class="bg">
          <image
            class="bg-img"
            src="https://ustatic.hudongmiao.com/joymew-host-contest/common-reward-bg.png"
            alt=""
          />
        </div>
        <!-- 标题 -->
        <div class="title">
          <image
            class="title-img"
            src="https://ustatic.hudongmiao.com/joymew-host-contest/red-packet-reward-title.png"
            alt=""
          />
        </div>
        <!-- 奖品列表内容 -->
        <div class="content">
          <div
            v-for="prize in redPacketRankReward"
            :key="prize.id"
            class="prize"
          >
            <image
              class="prize-img"
              :src="prize.img"
            />
            <div class="prize-desc">
              {{ prize.desc }}
            </div>
          </div>
        </div>
        <!-- 我知道了按钮 -->
        <div
          class="confirm-btn"
          @click="changeRedPacketRankCurrentModalType('no')"
        >
          我知道了
        </div>
      </div>
      <!-- 关闭按钮 -->
      <div
        class="close-btn"
        @click="changeRedPacketRankCurrentModalType('no')"
      >
        <image
          class="close-btn-img"
          src="@/static/icons/common/close.png"
          alt=""
        />
      </div>
    </div>
  </with-mask>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useRank } from '@/stores/rank';

const { redPacketRankCurrentModalType } = storeToRefs(useRank());
const { changeRedPacketRankCurrentModalType, redPacketRankReward } = useRank();
</script>

<style lang="scss" scoped>
.container {
  position: relative;

  display: grid;
  grid-template:
    "prizeList" 1fr
    "closeBtn" 48px;
  row-gap: 20px;
  justify-items: center;

  // 边框装饰
  .border-decorate {
    position: absolute;
    top: -32.5641vw;
    left: 50%;
    z-index: -1;

    width: 65.1282vw;
    height: 60.2564vw;

    transform: translateX(-50%);

    // 阳光
    .sunshine {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;
    }

    // 礼物
    .cloud {
      position: absolute;
      top: 12.5641vw;
      left: 50%;

      width: 59.4872vw;
      height: 32.5641vw;

      transform: translateX(-50%);
    }
  }

  .prize-list {
    grid-area: prizeList;

    position: relative;

    width: calc(73.8462vw - 24px);
    overflow: hidden;

    border: 1px solid #fff;
    border-radius: 16px;

    padding: 0 12px;
    display: grid;
    grid-template:
      "." 22px
      "title" 5.1282vw
      "." 15px
      "content" auto
      "." 24px
      "confirmBtn" auto
      "." 33px;
    justify-items: center;

    // 背景
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;

      width: 100%;
      height: 100%;

      .bg-img {
        width: 100%;
        height: 100%;
      }
    }

    // 标题
    .title {
      grid-area: title;
      align-self: self-start;

      position: relative;
      z-index: 1;

      width: 56.4103vw;
      height: 5.1282vw;

      text-align: center;

      // 标题背景
      .title-img {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: -1;

        width: 100%;
        height: 100%;

        transform: translateX(-50%);
      }
    }

    // 内容
    .content {
      grid-area: content;

      overflow: scroll;

      display: grid;
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(3, 1fr);
      gap:12px 7px; // 奖品

      &::-webkit-scrollbar {
        display: none;
      }

      .prize {
        width: 21.2821vw;
        height: 112px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .prize-img {
          width: 83px;
          height: 83px;
        }

        .prize-desc {
          margin-top: 8px;

          font-size: 15px;
        }
      }
    }

    // 「我知道了」按钮
    .confirm-btn {
      grid-area: confirmBtn;

      width: 61.5385vw;
      height: 9.2308vw;

      background: #ff2459;
      border-radius: 8.7179vw;

      font-size: 3.8462vw;
      font-weight: 500;
      line-height: 9.2308vw;
      color: #fff;
      text-align: center;
    }
  }

  // 关闭按钮
  .close-btn {
    grid-area: closeBtn;

    width: 47px;
    height: 47px;

    .close-btn-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
